<template>
  <div class="workgroup_load" v-loading="isLoading">
    <one-title title="班组负荷查询" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          class="search_btn"
          @click="_exportTable">
          <i class="iconfont icon-biaogedaochu"></i>
          导出
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56 page_content">
      <div class="multiple_search">
        <div class="search_item">
          <div class="select_label">
            选择班组：
          </div>
          <div class="search_wrapper">
            <el-select
              v-model="workgroupId"
              placeholder="请选择班组"
              size="small">
              <el-option
                v-for="(item,index) in workGroup"
                :key="index"
                :label="item.NAME"
                :value="item.ID">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_item">
          <span class="search_label">时间选择：</span>
          <el-date-picker
            size="small"
            :clearable="false"
            v-model="currentYear"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </div>
        <div class="mes_btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search_btn"
            @click="searchData">
          </el-button>
        </div>
      </div>
      <!--负荷查询图表-->
      <load-query-chart :currentYear="currentYear" ref="LoadQueryChart" :workgroupId="workgroupId"></load-query-chart>
      <!--负荷查询表格-->
      <load-query-table :tableColumns="tableColumns" :currentYear="currentYear" ref="LoadQueryTable" :workgroupId="workgroupId"></load-query-table>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableColumns'
import LoadQueryTable from '@/components/reportManage/loadQuery/LoadQueryTable'
import LoadQueryChart from '@/components/reportManage/loadQuery/LoadQueryChart'
export default {
  name: 'WorkgroupLoad',
  data() {
    return {
      currentYear: new Date(window.serverTime), // 当前年份
      tableColumns: tableColumns, // 表格列
      isLoading: false, // 加载
      workgroupId: '', // 所选班组ID
    }
  },
  components: {
    LoadQueryTable,
    LoadQueryChart
  },
  computed: {
    // 班组
    workGroup() {
      return this.$store.state.workgroupLoad.workGroup || []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 页面初始化
    async init() {
      this.isLoading = true
      await this.getWorkGroup()
      this.isLoading = false
      this.$refs.LoadQueryChart.initChart()
      this.$refs.LoadQueryTable.initTable()
    },
    // 刷新
    refresh() {
      this.workgroupId = this.workGroup[0].ID || ''
      this.currentYear = new Date(window.serverTime)
      this.$nextTick(() => {
        this.$refs.LoadQueryChart.initChart()
        this.$refs.LoadQueryTable.refreshTable()
      })
    },
    // 查询数据
    searchData() {
      this.$refs.LoadQueryChart.initChart()
      this.$refs.LoadQueryTable.initTable()
    },
    // 获取班组列表
    async getWorkGroup() {
      return this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/workgroup/workgroup/listfields/id,name',
        module: 'workgroupLoad',
        state: 'workGroup'
      }).then(res => {
        this.workgroupId = res[0].ID
      })
    },
    // 导出表格
    _exportTable() {
      let postData = this.$refs.LoadQueryTable.formatPostData({
        pageNo: 1,
        pageSize: 9999999
      }, [])
      this.$exportTable(postData, 'a/turnoverworkstage/turnoverWorkstage/exportasexcel', '班组负荷查询')
    },
  }
}
</script>

<style lang="less">
  .workgroup_load{
    .page_content{
      padding-bottom: 20px;
    }
    .chart_box {
      padding: 0 20px;
      .chart_wrapper {
        width: 100%;
        height: 500px;
        box-sizing: border-box;
        border: 1px solid #dcdfe6;
        margin-bottom: 20px;
        padding-top: 20px;
      }
    }
  }
</style>
